<template>
	<view class="fwcontainer">
		<uni-search-bar @confirm="bindConfirm" @cancel="bindCancel" placeholder="请输入车牌号或车主" maxlength="20" cancelButton="auto"
		 clearButton="auto" />
		 <scroll-view class="uni-padding-wrap euni-margin20-top enui-bgcolor-white">
			 <view class="uni-flex uni-column list-item" v-for="(item,index) in dataPageList">
				 <view class="uni-flex uni-row">
					 <text class="text euni-flex-autowidth">{{item.create_time}}</text>
					 <text class="text euni-flex-autowidth euni-txt-center">{{item.car_sn}}</text>
					 <text class="text euni-flex-autowidth euni-txt-center">{{item.car_owner}}</text>
					 <text class="text euni-flex-autowidth euni-txt-center">{{item.mileage}}km</text>
				 </view>
				 <view class="text">{{item.remark}}</view>
				 <view class="uni-flex uni-column child-list">
					 <text class="text uni-title">维护项清单</text>
					 <view class="uni-flex uni-row" v-for="(item2,index2) in item.detail_list">
						 <text class="text euni-flex-autowidth">{{item2.repair_info}}</text>
						 <text class="text euni-flex-autowidth">{{item2.remark}}km</text>
					 </view>
				 </view>
			 </view>
		 </scroll-view>		 		
	</view>
</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'

	const APP = getApp();

	export default {
		components: {
			uniSearchBar
		},
		data() {
			return {
				//设置数据
				dataKeywords:'',
				isSearched:false,
				//分页数据
				dataPageList: [],
				dataPageNum: 0,
			}
		},
		methods: {
			bindConfirm(e) {
				let keywords = e.value.trim();
				if(keywords.length > 0){
					this.isSearched = true;
					this.dataKeywords = keywords;
					this.dataPageList = [];
					this.dataPageNum = 0;
					this.loadPageList(function() {
						uni.stopPullDownRefresh();
					});
				}
			},
			bindCancel(e) {				
				if(this.isSearched){
					this.isSearched = false;
					this.dataKeywords = '';
					this.dataPageList = [];
					this.dataPageNum = 0;
					this.loadPageList(function() {
						uni.stopPullDownRefresh();
					});
				}
			},
			loadPageData: function() {
				let _this = this;
				_this.loadPageList(null);
			},
			loadPageList: function(completedcallback) {
				let _this = this;
				APP._post('/api/record/index', {
					page_index: _this.dataPageNum + 1,
					car_sn: _this.dataKeywords
				}, null, function(res) {
					//执行成功
					if (res.code === APP.appconfig.fwcode.successed) {
						if(res.data.list.length > 0){
							_this.dataPageNum = res.data.index;
							_this.dataPageList = _this.dataPageList.concat(res.data.list);	
						}else{
							_this.dataPageNum = -1;
						}						
					} else {
						APP.apptool.showToastInfo(res.msg);
					}
				}, function(res) {
					//执行失败
				}, function(res) {
					//执行完成
					completedcallback && completedcallback();
				});
			},
		},
		//生命周期
		onLoad() {
			this.loadPageData();
		},
		onShow() {

		},
		onReady() {

		},
		onPullDownRefresh() {
			let _this = this;

			this.dataPageList = [];
			this.dataPageNum = 0;
			_this.loadPageList(function() {
				uni.stopPullDownRefresh();
			});
		},
		onReachBottom() {
			let _this = this;

			if (this.dataPageNum !== -1) {
				// 显示加载图标
				uni.showLoading({
					title: '加载中...',
				})
				this.loadPageList(function() {
					uni.hideLoading();
				});
			} else {
				APP.apptool.showToastInfo('已经是最后一页了');
			}
		},
		onHide() {

		},
		onUnload() {

		},
		onBackPress(options) {

		},
		onPageScroll(e) {

		},
	}
</script>

<style>
    .list-item{
	  display: -webkit-flex;
	  display: flex;
	  flex-direction: column;
	  margin: 20rpx 0px;
	  border-top: 3px dotted #0062CC;
	}
	.list-item .header{
		width: 750rpx;
		display: flex;
		flex-direction: row;
		align-items: center;		
	}
	.list-item .remark{
	  width: 750rpx;
	}
	.list-item .title{
	  flex: 1;
	  color: #000;
	  font-size: 28rpx;
	  /* 设置行高后，会显示已隐藏的内容 */
	  /* line-height: 28rpx;  */
	}
	.child-list{
		background-color: #F9F9F9;
	}
	.child-list .text{
		font-size: 24rpx;
	}
	.child-list .uni-title{
		padding: 5rpx 0rpx !important;		
		font-weight: bolder;		
	}
</style>
